<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bs/css/bootstrap.css">
    <script src="./vue.js"></script>
    <script src="./jquery-1.12.4.min.js"></script>
    <style>
        #big {
            margin: 50px auto;
        }

        .form-horizontal {
            box-sizing: border-box;
            padding-right: 350px;
        }

        td,
        th {
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div id="big" class="container">
        <!-- 表单开始 -->
        <div class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="请输入姓名" v-model.tirm="name">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">电话</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputPassword3" placeholder="请输入电话" v-model.tirm="tel">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success" @click="add()" v-if="btn">添加</button>
                    <button type="submit" class="btn btn-primary" @click="xiu()" v-if="!btn">修改</button>
                    <button type="submit" class="btn btn-info" @click="clear()">重置</button>
                </div>
            </div>
        </div>
        <!-- 表单结束 -->

        <!-- 表格开始 -->
        <table class="table ">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <tr v-if="arr.length<=0">
                <td colspan="4">暂无数据</td>
            </tr>
            <tr v-for="(e,i) in arr" :key="e.id">
                <td>{{ i+1 }}</td>
                <td>{{ e.name }}</td>
                <td>{{ e.tel }}</td>
                <td>
                    <button class="btn btn-warning" @click="del(i)">删除</button>
                    <button class="btn btn-primary" @click="select(i,e.name,e.tel)">修改</button>
                </td>
            </tr>
        </table>
        <button class="btn btn-danger" @click="allclear()">全部清除</button>
        <!-- 表格结束 -->
    </div>

</body>

<script>
    new Vue({
        el: "#big",
        data: {
            id: 1,
            name: "",
            tel: "",
            arr: [],
            btn: true,
            i: ""
        },
        methods: {
            add() {
                if (!this.name || !this.tel) {
                    alert("姓名电话不能为空")
                } else {
                    var obj = { id: this.id, name: this.name, tel: this.tel }
                    this.arr.push(obj)
                    this.id++;
                    this.name = ""
                    this.tel = ""
                }
            },
            clear() {
                this.name = ""
                this.tel = ""
            },
            del(k) {
                console.log(k);
                this.arr.splice(k, 1);
            },
            select(j, n, t) {
                this.btn = false
                this.i = j
                this.name = n
                this.tel = t
            },
            xiu() {
                if (!this.name || !this.tel) {
                    alert("姓名电话不能为空")
                } else {
                    this.arr[this.i].name = this.name
                    this.arr[this.i].tel = this.tel
                    this.name = ""
                    this.tel = ""
                    this.btn = true
                }
            },
            allclear() {
                this.arr = []
            }
        }
    })
</script>

</html>